<template>
<view class="detailCon">
  <view class="con">
    <rich-text :nodes="nodes"></rich-text>
  </view>
</view>
</template>

"<script>

export default {
  data() {
    return {
      is_render: false
    };
  },

  components: {},
  props: {
    nodes: {
      type: String,
      observer: function () {
        if (this.is_render === false) {
          this.is_render = true;
          console.log(this.nodes);
          var nodes = this.nodes.replace(/<th class="/g, '<th class="th ');
          nodes = nodes.replace(/<tr>/g, '<tr class="tr">');
          nodes = nodes.replace(/<tbody>/g, '<tbody class="tbody">');
          nodes = nodes.replace(/<thead>/g, '<thead class="thead">');
          nodes = nodes.replace(/<tfoot>/g, '<tfoot class="tfoot">');
          nodes = nodes.replace(/<th>/g, '<th class="th">');
          nodes = nodes.replace(/<td class="/g, '<td class="td ');
          nodes = nodes.replace(/<td>/g, '<td class="td">');
          nodes = nodes.replace(/<p class="/g, '<p class="p ');
          nodes = nodes.replace(/<p>/g, '<p class="p">');
          nodes = nodes.replace(/<ul>/g, '<ul class="ul">');
          nodes = nodes.replace(/<li>/g, '<li class="li">');
          this.setData({
            nodes: nodes
          });
        }
      }
    }
  },
  methods: {
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
/* 商品详情富文本 */
.detailCon .con .deal-menu {border-collapse: collapse;border-spacing: 0;}
.detailCon .con	.deal-menu-summary {padding: 0 10px 10px;text-align: right;border-bottom: 1px #e8e8e8 solid;}
.detailCon .con	.detail .content .p {margin: 10px 0;color: #a1a1a1;}
.detailCon .con	.deal-menu-summary .worth {display: inline-block;min-width: 10px;_width: 10px;padding-right: 20px;text-align: left;word-break: normal;word-wrap: normal;font-weight: bold;}
.detailCon .con	.deal-menu-summary .price {color: #ea4f01;padding-right: 0;}
.detailCon .con	.detail .content{line-height:1.6em;}
.detail .content .deal-menu { width:100%!important; margin-top:0px; border:none; font-size:14px; color:#222; }
.detailCon .con .detail .content .deal-menu .name { width:auto; text-align:left; border-left:none; }
.detailCon .con .detail .content .deal-menu .price { width:20%; text-align:center; }
.detailCon .con	.detail .content .deal-menu .amount { width:20%; text-align:center; }
.detailCon .con	.detail .content .deal-menu .subtotal { width:20%; text-align:right; border-right:none; font-family: arial, sans-serif; }
.detailCon .con	.detail .content .deal-menu caption, .detail .content .deal-menu .th, .detail .content .deal-menu .td {padding:8px 10px; background:#FFF; border:1px solid #E8E8E8; border-top:none; word-break:break-all; word-wrap:break-word;}
.detailCon .con	.detail .content .deal-menu caption { background:#F0F0F0; }
.detailCon .con	.detail .content .deal-menu caption .title, .detail .content .deal-menu .subline .title { font-weight:bold; }
.detailCon .con .detail .content .deal-menu .th { color:#333; background:#F0F0F0; font-weight:bold; border-left-style:none; border-right-style:none;}
.detailCon .con	.detail .content .deal-menu .td { color:#a1a1a1; border-bottom-style:dotted; }
.detailCon .con	.detail .content .deal-menu .subline { background:#fff; text-align:center; border-left:none; border-right:none; }
.detailCon .con	.detail .content .deal-menu .subline-left { width:22%; text-align:left;border-right: 1px #e8e8e8 dotted; }
.detailCon .con	.detail .content .img{max-width:100%;_width:100%;display:inline-block;}
.detailCon .con	.detail .content .ul{list-style-type: initial;padding-left:16px;font-size:14px!important;}
.detailCon .con	.detail .content .ul .li {font-size:14px!important;margin:4px 0;line-height: 1.5;color:#a1a1a1!important;}
</style>